<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
	<title>부트스트랩</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/bootstrap/css/bootstrap.css">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
<style>
.col-md-3{
	padding-top:3em;
}
.btn-group{
	margin:1%;
}
#language{
	border-left:1px solid #dddddd;
	border-right:1px solid #dddddd;
	border-bottom:1px solid #dddddd;
}
.table{
	width:98%;
	margin:0 1% 1% 1%;
}
</style>
</head>
<body>
<div class="container">
	<div class="row">
		
		<div class="col-md-3">
			<div id="sidebar" class="list-group">
			  <a href="javascript:;" class="list-group-item active">프로그래밍</a>
			  <a href="javascript:;" class="list-group-item">SQL</a>
			  <a href="javascript:;" class="list-group-item">서버</a>
			  <a href="javascript:;" class="list-group-item">시스템</a>
			  <a href="javascript:;" class="list-group-item">소프트웨어</a>
			</div>
		</div>
		<div class="col-md-9">
			<ul id="tab" class="nav nav-tabs con">
			  <li class="active"><a href="#language" data-toggle="tab">언어</a></li>
			  <li><a href="#framework" data-toggle="tab">프레임워크</a></li>
			</ul>
			<div class="tab-content">
				<div class="tab-pane active" id="language">
					<div id="language-selectbox" class="btn-group">
					  <button type="button" class="btn btn-default">언어선택</button>
					  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
						<span class="caret"></span>
						<span class="sr-only">Toggle Dropdown</span>
					  </button>
					  <ul class="dropdown-menu" role="menu">
					    <li><a href="c">C</a></li>
					    <li><a href="java">JAVA</a></li>
					    <li><a href="c">C++</a></li>
					  </ul>
					</div>
					<table class="table table-bordered table-hover">
						<colgroup>
							<col width="6%">
							<col width="10%">
							<col width="45%">
							<col width="13%">
							<col width="9%">
							<col width="17%">
						</colgroup>
						<thead>
							<tr>
								<th>번호</th>
								<th>카테고리</th>
								<th>제목</th>
								<th>작성자</th>
								<th>조회수</th>
								<th>최종수정일</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>1</td>
								<td>프로그래밍에대하여</td>
								<td>3</td>
								<td>4</td>
								<td>5</td>
								<td>6</td>
							</tr>
							<tr>
								<td>1</td>
								<td>2</td>
								<td>3</td>
								<td>4</td>
								<td>5</td>
								<td>6</td>
							</tr>
							<tr>
								<td>1</td>
								<td>2</td>
								<td>3</td>
								<td>4</td>
								<td>5</td>
								<td>6</td>
							</tr>
							<tr>
								<td>1</td>
								<td>2</td>
								<td>3</td>
								<td>4</td>
								<td>5</td>
								<td>6</td>
							</tr>
						</tbody>					  
					</table>					
					
				</div>				
				<div class="tab-pane" id="framework">
					프레임워크
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/jquery/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
	$('#tab a').click(function (e) {
		  e.preventDefault();
		  $(this).tab('show');
	});
	$("#language-selectbox").on("click" ,"a", function(e){
		e.preventDefault();
		console.log($(this).prop("href"));
	});
	
});
</script>
</body>
</html>
